<template>
  <div id="contentRight">
    <section id="sec1">
      <p class="guide">
        <router-link to="/contractList">合约列表&nbsp;&nbsp;>&nbsp;</router-link>
        <span>充值电费包</span>
      </p>
      <table>
        <thead>
        <tr>
          <td>名称</td>
          <td>金额</td>
          <td>到手总算力</td>
          <td>合约包剩余天数</td>
          <td>电费包剩余天数</td>
          <td>合约状态</td>
          <td>开挖时间</td>
          <td>下单时间</td>
        </tr>
        </thead>
        <tbody>
        <tr>
          <th>
            <span>{{machine.productName}}</span>
          </th>
          <th>
            <span>{{machine.state2 == 2 ? machine.continueTotalDeposit : machine.totalDeposit}}{{machine.payUnitName}}</span>
          </th>
          <th>
             <span class="pointer" @mouseenter="showItem1(machine , $event)" @mouseout="showWin1 = false">
               {{machine.handsPower}}T
             </span>
          </th>
          <th>{{machine.toEnd}}天</th>
          <th><span>{{machine.eToEnd}}天</span></th>
          <th><span>{{machine.workText}}</span></th>
          <th><span>{{machine.startTime}}</span></th>
          <th><span>{{machine.operateTime}}</span></th>
        </tr>
        </tbody>
      </table>
    </section>
    <section id="sec2">
      <div class="d1">
        <span class="title">充值天数：</span>
        <input type="number" v-model="inputDays" id="input_days" pattern="[0-9]*" placeholder="请输入充值天数">
        <span class="s3">天</span>
        <div class="days">
          <span v-for="(item,index) in predicts" v-if="item.predict != 1" @click="inputDays = item.days">{{item.days}}天</span>
        </div>
      </div>
      <div class="d2">
        <span class="title">预计每日电费:</span>
        <span class="electricVal">
            {{btc_electric_price}} BTC ≈ {{this.numSlice(defaultSelPayTypePrice , sliceNumLen )}}{{defaultPayType}}
        </span>
      </div>
      <div class="d3">
        一次性<span v-for="(item,index) in predicts" v-if="item.predict != 1">充值满{{item.days}}天享{{item.predict}}折；</span>
      </div>
      <div class="d4">
        <span class="title">选择支付方式：</span>
        <div class="payMethods">
          <button @click="defaultPayType='CNY'" :class="defaultPayType === 'CNY' ? 'active':''">CNY</button>
          <button @click="defaultPayType='USDT'":class="defaultPayType === 'USDT' ? 'active':''">USDT</button>
<!--          <label for="wallet">-->
<!--            <input type="radio" v-model="defaultPayType" name="payType" value="CNY" id="wallet" checked>-->
<!--            <span class="check"></span>-->
<!--            <span class="payName">现金钱包</span>-->
<!--            <span class="leastMoney">可用：<span class="cnyMoney">{{left_CNY}}</span></span>-->
<!--          </label>-->
<!--          <label for="usdt">-->
<!--            <input type="radio" v-model="defaultPayType"  name="payType" value="USDT" id="usdt">-->
<!--            <span class="check"></span>-->
<!--            <span class="payName">USDT</span>-->
<!--            <span class="leastMoney">可用：<span class="usdtMoney">{{left_USDT}}</span></span>-->
<!--          </label>-->
        </div>
      </div>
      <p class="p5">
        可用余额：{{defaultPayType === 'CNY' ? left_CNY : left_USDT}}{{defaultPayType}}
      </p>
      <div class="p6">
        <span class="title">总计金额：</span>
        <span class="totalMoney">{{totalMoney}}{{defaultPayType}}</span>
      </div>
      <p class="p7">
        <button @click="submit">立即充值</button>
      </p>
    </section>
    <!--展示算力包的power信息-->
    <div class="abWin" v-if="showWin1" :style="win1Style">
      <span class="top">
        <span>总算力</span>
        <span>{{win1Data.totalPower}}T</span>
      </span>
      <span class="line">
        <span>
          <span class="left">基础算力</span>
          <span class="right">{{win1Data.basePower}}T</span>
        </span>
        <span>
          <span class="left">浮动算力</span>
          <span class="right">{{win1Data.floatPower}}T</span>
        </span>
        <span>
          <span class="left">达标算力</span>
          <span class="right">{{win1Data.standardPower}}T</span>
        </span>
        <span>
          <span class="left">期货算力</span>
          <span class="right">{{win1Data.futuresPower}}T</span>
        </span>
        <span>
          <span class="left">定期算力</span>
          <span class="right">{{win1Data.regularPower}}T</span>
        </span>
        <span>
          <span class="left">邀请算力</span>
          <span class="right">{{win1Data.invitePower}}T</span>
        </span>
      </span>
    </div>
    <confirm-dialog ref="dl" confirmBtn="确定充值"
                    msg="您当前充值天数＜合约包剩余总天数当电费用完时，矿机将停机没有产出请关注电费包剩余情况，及时充值"
                    @confirm="confirmAddElectric"/>
  </div>
</template>
<script>
  import { addElectric , leftMoney , orderDetail} from  '../http/api'
  // import ConfirmDialog from "../components/ConfirmDialog";
  export default {
    name : 'rechargeElectric',
    components: {
      ConfirmDialog : resolve => { require(['../components/ConfirmDialog'], resolve) },/*确认弹窗*/
    },
    data(){
      return{
        addDays : [],
        win1Data : {
          totalPower : 0,
          basePower : 0 ,
          floatPower : 0,
          standardPower : 0,
          futuresPower : 0,
          regularPower : 0,
          invitePower : 0,
        },//弹窗1数据
        showWin1 : false,//显示弹窗1
        win1Style : {left : 0 ,right : 0}, //弹窗1位置
        insuranceContract : '',//协议内容
        predict_electricity_cny : '',//CNY电费单价
        predict_electricity_usdt : '',//usdt电费单价
        defaultSelPayTypePrice : '',//默认选择的支付方式的单价
        btc_electric_price : '',//btc价格根据CNY价格折算
        electricity_config : '',//天数打折优惠
        predict_days : '',//天数数组
        predicts : [],   //打折优惠[{days:60 , predict : 0.05}] 根据天数升序排序
        order_id : '',//订单id
        handsPower : '',//到手总算力
        machine : {},//矿机数据
        toEnd : '',//合约包剩余天数
        eToEnd : '',//电费剩余天数
        leastPowerDays : '',//合约包除开电费天数的剩余天数
        leftPowerDays : '',//合约包除开电费天数的剩余天数
        inputDays : '',//充值天数
        defaultPayType : 'CNY',//默认支付方式
        totalMoney : '0',
        left_USDT : '',//usdt余额
        left_CNY : '',//cny余额
        sliceNumLen : 2,//显示钱截取位数
      }
    },
    comments:{
      AgreementDialog : resolve => { require(['../components/AgreementDialog'], resolve) },/*协议弹窗*/
      ConfirmDialog : resolve => { require(['../components/ConfirmDialog'], resolve) },/*确认弹窗*/
    },
    mounted() {
      let query = this.$route.query,
        thiz = this;
      let orderId = query.orderId;
      if(!orderId){
        require('../common/js/toast').toast('页面地址未传入订单id');
        this.$router.go(-1);
        return;
      }
      let https = [
        orderDetail({orderId : orderId , noLoading : true}).then(res => {
          if(res.code == 200){
            let machine = res.data;
            let data = machine;
            let standardPrice = thiz.accMoreMul(data.basePower, 425, data.num);//标准价格
            if (data.paymentCurrencyCode != "USDT") {
              standardPrice = thiz.accMoreMul(data.basePower, 3000, data.num);
            }
            data.payUnitName = data.paymentCurrencyCode == "BCNY" ? "OTC余额" : data.paymentCurrencyCode;//金额单位名称
            // data.standardPrice = standardPrice;
            // let oldOrderMoney = data.totalDeposit;//原订单总金额
            // data.oldOrderMoney = oldOrderMoney;
            // data.needMonney = this.accSub(standardPrice, oldOrderMoney);
            // let differencePrice = thiz.accSub(standardPrice, oldOrderMoney); //金额差价
            // data.differencePrice = differencePrice;
            let win1Data = this.getPbHandPower(data);
            data.handsPower = win1Data.totalPower;
            thiz.machine = data;
            thiz.win1Data = win1Data;
            /*--------*/
            thiz.insuranceContract = machine.insuranceContract;//协议内容
            thiz.predict_electricity_cny = machine.predict_electricity_cny || 1;  //CNY电费单价
            thiz.predict_electricity_usdt = machine.predict_electricity_usdt || 1;//usdt电费单价
            thiz.defaultSelPayTypePrice = thiz.predict_electricity_cny || 1;//默认选择的支付方式的单价
            thiz.btc_electric_price = thiz.numSlice(thiz.accDiv(thiz.predict_electricity_cny, machine.btcPrice), 8);
            thiz.electricity_config = machine.electricity_config;
            thiz.predict_days = Object.keys(thiz.electricity_config);
            function sortNumber(a, b) {//升序
              return a - b
            }
            thiz.predict_days.sort(sortNumber);
            let predicts = [];    //打折优惠[{days:60 , predict : 0.05}] 根据天数升序排序
            for (let i = 0; i < thiz.predict_days.length; i++) {
              predicts.push({
                days: thiz.predict_days[i],
                predict: thiz.accSub(1, thiz.electricity_config[thiz.predict_days[i]]),
              })
            }
            thiz.predicts = predicts;//打折优惠[{days:60 , predict : 0.05}] 根据天数升序排序
            thiz.order_id = query.order_id;//订单id
            thiz.handsPower = query.handsPower;//到手总算力
            thiz.machine = machine;
            thiz.eToEnd = machine.eToEnd;
            thiz.toEnd = machine.toEnd;
            thiz.leastPowerDays = thiz.accSub( machine.toEnd, machine.eToEnd);//合约包除开电费天数的剩余天数
            thiz.leftPowerDays =  thiz.leastPowerDays;//合约包除开电费天数的剩余天数
            // thiz.leastPowerDays = 100;//合约包除开电费天数的剩余天数
            // thiz.leftPowerDays = thiz.leastPowerDays;//合约包除开电费天数的剩余天数
          }
        }),
        leftMoney({noLoading : true}).then(res => {
          if( res.code == 200 ){
            let payList = res.data.lists;
            thiz.left_CNY = thiz.numSlice(payList.CNY, 2);
            thiz.left_USDT = thiz.numSlice(payList.USDT, 4);
          }
        })
      ];
      this.PromiseAll(https);
    },
    watch:{
      inputDays(val){
        var thiz = this;
        let inputDays = parseInt(val);
        if (inputDays > thiz.leastPowerDays) {
          inputDays = thiz.leastPowerDays;
        }
        if(isNaN(inputDays)){
          return;
        }
        inputDays = isNaN(inputDays) ? 0 : inputDays;
        thiz.inputDays = inputDays;
        let eToEnd = thiz.eToEnd;
        var eletricDays = thiz.accAddMore(inputDays, eToEnd);//电费天数
        eletricDays = isNaN(eletricDays) ? eToEnd : eletricDays;
        thiz.leftPowerDays = thiz.accSub(thiz.toEnd, eletricDays);
        if (inputDays && inputDays > 0) {
          thiz.mathTotalPrice();
        }
      },
      defaultPayType(defaultPayType){
        this.defaultSelPayTypePrice = defaultPayType === 'CNY'  ?  this.predict_electricity_cny : this.predict_electricity_usdt;
        this.numSliceLen = defaultPayType === 'CNY' ?  2 : 4;
        this.mathTotalPrice();
      }
    },
    methods:{
      getPbHandPower(item){
        //获取普通的合约包到手算力
        let win1Data = {
          //totalPower : this.accMoreMul(item.basePower , item.num),
          basePower : this.accMoreMul(item.basePower , item.num), //基础算力
          floatPower : this.accMoreMul(item.floatPower, item.num),//浮动
          standardPower : this.accMoreMul(item.pePower || 0, item.num),//达标
          futuresPower : this.accMoreMul(item.futuresPower, item.num),//期货
          regularPower : this.accMoreMul(item.regularPower, item.num),//定期
          invitePower : 0,//邀请
        };
        let result = 0 , thiz = this;
        this.for(win1Data , ( item , key ) => {
          result = thiz.accAddMore( result , item);
        });
        win1Data.totalPower = result;
        return win1Data;
      },
      showItem1(item , e ){
        let x = e.clientX;
        let y = e.clientY;
        this.win1Style = {left : x+20+'px' , top : y-30 +'px'};
        this.win1Data = this.getPbHandPower(item);
        this.showWin1 = true;
      },
      mathTotalPrice() {
        let thiz = this;
        let sliceNum = thiz.numSliceLen;
        let machine = thiz.machine;
        let totalMoney = 0;
        let inputDays = thiz.inputDays;//输入天数
        if (!inputDays && inputDays < 1) {
          inputDays = 0;
        }
        let predict_days = thiz.predict_days,
          electricity_config = thiz.electricity_config;
        let defaultSelPayTypePrice = Number(thiz.machine.electric_price[thiz.defaultPayType]);//每小时电价
        totalMoney = thiz.accMoreMul(
          machine.mine_power , '24' , machine.computingPower , machine.num , defaultSelPayTypePrice , inputDays
        );
        for (let i = predict_days.length - 1; i >= 0; i--) {
          if (inputDays >= predict_days[i]) {
            totalMoney = thiz.accMul(totalMoney, thiz.accSub(1, electricity_config[predict_days[i]]));
            //打折计算电费
            break;
          }
        }
        totalMoney = totalMoney > 0 ? thiz.numSlice(totalMoney, sliceNum) : '0';
        thiz.totalMoney = totalMoney;
      },
      confirmAddElectric() {
        let thiz = this,
          totalMoney = thiz.totalMoney,
          defaultPayType = thiz.defaultPayType;
        if( Number(totalMoney) > Number(thiz['left_'+defaultPayType] ) ){
          let text = defaultPayType === 'CNY' ? '现金钱包' : 'USDT';
          require('../common/js/toast').toast(text + '可用余额不足，请充值');
          return;
        }
        addElectric({
          order_id: thiz.order_id,
          days_num: thiz.inputDays,
          site: 1,
          currency: thiz.defaultPayType
        }).then(res => {
          if( res.code == 200){
            require('../common/js/toast').toast('充值成功');
            thiz.$router.go(-1);
          }
        })
      },
      submit(){
        let thiz = this,
          leftPowerDays = Number(thiz.leftPowerDays),
          inputDays = Number(thiz.inputDays),
          toEnd = Number(thiz.toEnd),
          eToEnd = Number(thiz.eToEnd),
          toast = require('../common/js/toast').toast;
        if (toEnd == 0) {
          toast('合约剩余天数为0不可以充值');
          return;
        }
        if (inputDays && inputDays > 0) {
          if (leftPowerDays > 0) {
            thiz.$refs.dl.dialogShow();
          } else {
            thiz.confirmAddElectric();
          }
        } else {
          if( eToEnd == toEnd){
            toast('电费包剩余时间已足够');
          }else{
            toast('请输入充值天数');
          }
        }
      },
    }
  }
</script>
<style lang="less" scoped>
  @import "../common/style/common";
  @import "../common/style/public.css";
  #sec1{
    >table{
      width: 100%;text-align: left;margin-top: 15px;
      th{
        font-weight: 500;font-size: 14px;color: #262626;
        >span{
          display: inline-block;height: 100%;
        }
      }
      >thead{
        color: #999999;font-size: 14px;
        tr>td{
          padding: 25px 0;
          &:last-child{
            text-align: right;
          }
        }
      }
      >tbody{
        th{
          padding: 24px 6px;padding-top: 0px;color: #595959;font-size: 14px;vertical-align: text-top;
        }
        tr>th:first-child{
          max-width: 220px;
        }
        >tr>th:last-child{
          text-align: right;
        }
        .pointer{
          .colorYellow;text-decoration: underline;
          &:hover{
            cursor: pointer;
          }
        }
        .setting{
          >span{
            display: inline-block;width: 100%;text-align: right;margin-top: 15px;
            &:first-child{
              margin-top: 0px;
            }
          }
        }
      }
    }
  }
  #sec2{
    margin-top: 10px;min-height: 580px;
    .title{
      font-size: 14px;
    }
    >.d1{
      overflow: hidden;
      .title{
        line-height: 38px;
      }
      >span,>input,>div{
        float: left;line-height: 38px;
      }
      >input{
        .input;height: 38px;width: 140px;padding: 0 9px;margin-left: 10px;
      }
      >.s3{
        padding-left: 15px;
      }
      >.days{
        overflow: hidden;
        >span{
          .colorYellow;text-decoration: underline;font-size: 16px;line-height: 38px;height: 38px;margin-left: 24px;display: inline-block;
          &:hover{
            cursor: pointer;
          }
        }
      }
    }
    >.d2{
      padding-top: 34px;
      .electricVal{
        .colorYellow;font-size: 22px;
      }
    }
    >.d3{
      height: 44px;line-height: 44px;padding: 0 21px;background: #FCFAF1;color: #B38B44;font-size: 14px;margin-top: 24px;
    }
    >.d4{
      overflow: hidden;padding-top: 26px;
      .title{
        line-height: 38px;float: left;height: 38px;
      }
      >div{
        float: left;
        >button{
          .cancel;height: 38px;width: 140px;border: 1px solid#D3D3D3;background: #fff;font-size: 16px;line-height: 38px;color: #7c7676;
          &.active, &:hover{
            background: rgba(255, 164, 66, 0.11);.colorYellow;.borderYellow;
          }
          &:last-child{
            margin-left: 10px;
          }
        }
      }
    }
    >.p5{
      padding-top: 32px;
    }
    >.p6{
      padding-top: 25px;
      .totalMoney{
        .colorYellow;font-size: 22px;
      }
    }
    >.p7{
      padding-top: 34px;
      >button{
        .submit;width: 160px;height: 38px;line-height: 38px;font-size: 14px;
      }
    }
  }
</style>
